<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来之窗昭和仙君cyberwin_fairyalliance_webquery - 事件处理方法</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #165DFF;
            border-bottom: 2px solid #165DFF;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        h2 {
            color: #333;
            margin: 25px 0 15px;
            padding-left: 10px;
            border-left: 4px solid #165DFF;
        }
        h3 {
            color: #444;
            margin: 20px 0 10px;
        }
        p {
            margin-bottom: 15px;
            line-height: 1.8;
        }
        .function-info {
            background-color: #f0f7ff;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0 25px;
        }
        .param-table th, .param-table td {
            border: 1px solid #ddd;
            padding: 12px 15px;
            text-align: left;
        }
        .param-table th {
            background-color: #f5f7fa;
            font-weight: bold;
        }
        pre {
            background-color: #f8f8f8;
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
            border: 1px solid #eee;
            margin: 15px 0;
        }
        code {
            font-family: "Consolas", monospace;
            color: #d32f2f;
        }
        .example-box {
            border: 1px dashed #165DFF;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
        }
        .event-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .event-item {
            background-color: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border-left: 3px solid #165DFF;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>未来之窗昭和仙君cyberwin_fairyalliance_webquery</h1>
        
        <h2>事件处理方法：事件()</h2>
        <p>本文档介绍$cq库中用于事件绑定的核心方法<code>事件()</code>，该方法提供了灵活的事件处理机制，支持多种事件类型和绑定方式。</p>
        
        <section>
            <h3>1. 方法概述</h3>
            <div class="function-info">
                <p><strong>方法名：</strong> 事件</p>
                <p><strong>作用：</strong> 为匹配的DOM元素绑定一个或多个事件处理函数，支持链式调用</p>
                <p><strong>所属对象：</strong> cyberwin_query.prototype</p>
                
                <h4>方法语法</h4>
                <pre><code>// 单个事件绑定
$cq(selector).事件(eventName, handler)

// 多个事件批量绑定
$cq(selector).事件({
    eventName1: handler1,
    eventName2: handler2,
    ...
})</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>eventName</td>
                        <td>String</td>
                        <td>是（单个事件时）</td>
                        <td>事件名称，如"click"、"focus"等</td>
                    </tr>
                    <tr>
                        <td>handler</td>
                        <td>Function</td>
                        <td>是（单个事件时）</td>
                        <td>事件处理函数，当事件触发时执行</td>
                    </tr>
                    <tr>
                        <td>events</td>
                        <td>Object</td>
                        <td>是（批量绑定时）</td>
                        <td>键值对形式的事件配置，键为事件名，值为对应的处理函数</td>
                    </tr>
                </table>
                
                <h4>返回值</h4>
                <p>返回当前$cq对象实例，支持链式调用（如：<code>$cq("input").事件("focus", fn).事件("blur", fn2)</code>）</p>
                
                <h4>实现代码</h4>
                <pre><code>cyberwin_query.prototype.事件 = function(events, handler) {
    // 处理对象形式的事件配置 { event1: handler1, event2: handler2 }
    if (typeof events === 'object' && typeof handler === 'undefined') {
        Object.keys(events).forEach(eventName => {
            this.事件(eventName, events[eventName]);
        });
        return this;
    }

    // 确保事件名和处理器有效
    if (typeof events !== 'string' || typeof handler !== 'function') {
        console.error('事件名必须为字符串且处理器必须为函数');
        return this;
    }

    // 为所有匹配元素绑定事件
    this.elements.forEach(element => {
        // 使用已有的myAddEvent函数绑定事件
        未来之窗_附加事件(element, events, function(e) {
            // 绑定this为当前元素，传递事件对象
            handler.call(element, e || window.event);
        });
    });

    return this; // 支持链式调用
};</code></pre>
            </div>
        </section>
        
        <section>
            <h3>2. 常用事件类型及示例</h3>
            <p>以下是Web开发中常用的事件类型及使用示例，适用于表单元素、输入框等交互组件：</p>
            
            <div class="event-list">
                <div class="event-item">
                    <strong>focus</strong>
                    <p>元素获得焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>blur</strong>
                    <p>元素失去焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>input</strong>
                    <p>元素值发生变化时触发</p>
                </div>
                <div class="event-item">
                    <strong>change</strong>
                    <p>元素值改变并失去焦点时触发</p>
                </div>
                <div class="event-item">
                    <strong>keydown</strong>
                    <p>按下键盘按键时触发</p>
                </div>
                <div class="event-item">
                    <strong>search</strong>
                    <p>搜索框触发搜索时触发</p>
                </div>
            </div>
            
            <div class="example-box">
                <h4>完整示例：表单输入框事件处理</h4>
                
                <h5>HTML结构</h5>
                <pre><code>&lt;form id="user-form"&gt;
    &lt;div&gt;
        &lt;label&gt;用户名：&lt;/label&gt;
        &lt;input type="text" id="username" name="username" placeholder="请输入用户名"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;搜索：&lt;/label&gt;
        &lt;input type="search" id="search-input" placeholder="搜索内容"&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;爱好：&lt;/label&gt;
        &lt;select id="hobby"&gt;
            &lt;option value=""&gt;请选择&lt;/option&gt;
            &lt;option value="reading"&gt;阅读&lt;/option&gt;
            &lt;option value="sports"&gt;运动&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                
                <h5>JavaScript代码</h5>
                <pre><code>// 用户名输入框事件处理
$cq("#username")
    // 获得焦点事件
    .事件("focus", function() {
        // 聚焦时添加高亮样式
        this.style.border = "2px solid #165DFF";
        this.style.backgroundColor = "#f0f7ff";
    })
    // 失去焦点事件
    .事件("blur", function() {
        // 失焦时恢复样式
        this.style.border = "1px solid #ccc";
        this.style.backgroundColor = "";
        
        // 验证输入内容
        if (this.value.length < 3) {
            alert("用户名长度不能少于3个字符");
        }
    })
    // 输入事件（实时监测）
    .事件("input", function(e) {
        console.log("正在输入：", this.value);
        // 限制输入长度为10
        if (this.value.length > 10) {
            this.value = this.value.substring(0, 10);
        }
    })
    // 键盘按下事件
    .事件("keydown", function(e) {
        // 禁止输入空格
        if (e.keyCode === 32) {
            e.preventDefault(); // 阻止默认行为
            alert("用户名不能包含空格");
        }
    });

// 搜索框事件处理
$cq("#search-input")
    // 搜索事件（回车或搜索按钮）
    .事件("search", function() {
        if (this.value.trim()) {
            console.log("搜索内容：", this.value);
            // 执行搜索逻辑
            // searchAction(this.value);
        } else {
            alert("请输入搜索内容");
        }
    });

// 下拉选择框事件处理
$cq("#hobby")
    // 选项改变事件
    .事件("change", function() {
        console.log("选择了：", this.value);
        if (this.value) {
            alert("您选择的爱好是：" + this.options[this.selectedIndex].text);
        }
    });

// 批量绑定事件示例
$cq("input, select")
    .事件({
        "focus": function() {
            console.log("元素获得焦点：", this.id);
        },
        "blur": function() {
            console.log("元素失去焦点：", this.id);
        }
    });</code></pre>
                
                <h5>示例说明</h5>
                <ul>
                    <li><strong>focus/blur</strong>：用于处理输入框获取和失去焦点时的样式变化和验证逻辑</li>
                    <li><strong>input</strong>：实时监测输入框内容变化，可用于实时验证或输入限制</li>
                    <li><strong>keydown</strong>：捕获键盘输入，可用于禁止特定字符输入或快捷键处理</li>
                    <li><strong>search</strong>：专门用于搜索框，在用户执行搜索操作时触发</li>
                    <li><strong>change</strong>：适用于下拉框、复选框等，在值改变并确认后触发</li>
                    <li>批量绑定方式可简化多事件绑定代码，提高开发效率</li>
                </ul>
            </div>
        </section>
        
        <section>
            <h3>3. 事件处理函数中的this和事件对象</h3>
            <div class="function-info">
                <h4>this指向</h4>
                <p>在事件处理函数中，<code>this</code>指向当前触发事件的DOM元素，方便直接操作元素：</p>
                <pre><code>$cq("input").事件("focus", function() {
    // this指向当前获得焦点的input元素
    this.style.outline = "none";
    this.style.boxShadow = "0 0 3px #165DFF";
});</code></pre>
                
                <h4>事件对象(e)</h4>
                <p>事件处理函数接收一个事件对象参数，包含事件相关信息（如触发元素、按键代码等）：</p>
                <pre><code>$cq("input").事件("keydown", function(e) {
    // 标准化事件对象（兼容IE）
    e = e || window.event;
    
    console.log("按键代码：", e.keyCode);
    console.log("是否按下Ctrl键：", e.ctrlKey);
    
    // 阻止事件默认行为（如禁止回车提交表单）
    if (e.keyCode === 13) {
        e.preventDefault();
    }
});</code></pre>
            </div>
        </section>
        
        <section>
            <h3>4. 实际应用场景</h3>
            <p><strong>场景1：表单验证</strong> - 结合focus、blur和input事件实现实时表单验证：</p>
            <pre><code>$cq("#email")
    .事件("blur", function() {
        var email = this.value;
        if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            alert("请输入有效的邮箱地址");
            this.focus(); // 聚焦回输入框
        }
    })
    .事件("input", function() {
        // 实时显示验证状态
        var isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
        this.style.borderColor = isValid ? "green" : "red";
    });</code></pre>
            
            <p><strong>场景2：搜索框自动完成</strong> - 结合input和keydown事件实现搜索提示：</p>
            <pre><code>$cq("#search")
    .事件("input", function() {
        // 输入间隔大于300ms才发送请求，避免频繁请求
        clearTimeout(this.searchTimer);
        var value = this.value;
        this.searchTimer = setTimeout(function() {
            if (value.length >= 2) {
                // 发送搜索建议请求
                // getSearchSuggestions(value);
                console.log("获取搜索建议：", value);
            }
        }, 300);
    })
    .事件("keydown", function(e) {
        // 按下上下键选择建议项
        if (e.keyCode === 38 || e.keyCode === 40) {
            e.preventDefault();
            // navigateSuggestions(e.keyCode === 38 ? "up" : "down");
        }
    });</code></pre>
        </section>
    </div>
</body>
</html>
